<template>
	<echartBox title="安全监测点" width="651px" height="427px">
		<div class="security-monitor-container">
			<div
				class="monitor-item"
				v-for="(item, index) in monitorData"
				:key="index"
			>
				<div class="monitor-icon">
					<img
                        v-if="index== 0"
						src="../../images/ico-Sbdw.png"
						alt="监测点"
					/>
					<img
                        v-if="index== 1"
						src="../../images/ico-Yljcdw.png"
						alt="监测点"
					/>
					<img
                        v-if="index== 2"
						src="../../images/ico-SCADA.png"
						alt="监测点"
					/>
				</div>
				<div class="monitor-title">
					{{ item.title }}
				</div>
				<div class="monitor-value">
					{{ item.value
					}}<span class="monitor-unit">{{
						item.unit
					}}</span>
				</div>
			</div>
		</div>
	</echartBox>
</template>

<script>
import echartBox from "../echart-box.vue";

export default {
	name: "Page1ItemBox12",
	components: {
		echartBox,
	},
	props: {
		monitorData: {
			type: Array,
			required: true,
			default: () => [
				{ title: "哨兵点位", value: 999999, unit: "个" },
				{ title: "压力监测点位", value: 999999, unit: "个" },
				{ title: "SCADA设备", value: 999999, unit: "个" }
			]
		}
	},
	methods: {
		// 初始化方法（安全监测点不需要图表初始化）
		initChart() {
			console.log('安全监测点组件已加载');
		},
	},
};
</script>

<style scoped lang="scss">
// 组件内部变量定义
$primary-color: #fff;
$secondary-color: rgba(255, 255, 255, 0.8);
$security-text-color: #00d4ff;
$security-unit-font-size: 19px;
$security-value-font-size: 44px;

.security-monitor-container {
	width: 100%;
	height: 100%;
	padding: 24px;
	display: flex;
	flex-direction: column;
	// justify-content: space-around;

	.monitor-item {
		display: flex;
		align-items: center;
		padding: 5px 18px;
		background-color: rgba(0, 34, 61, 0.2);
		border-radius: 5px;
		position: relative;

		.monitor-icon {
			width: 96px;
			height: 96px;
			margin-right: 37px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				background: radial-gradient(
					circle,
					rgba(0, 212, 255, 0.2) 0%,
					rgba(0, 34, 61, 0) 70%
				);
				border-radius: 50%;
				z-index: -1;
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		.monitor-title {
			font-size: 24px;
			color: $primary-color;
			margin-right: auto;
            margin-left: 20px;
		}

		.monitor-value {
			font-size: $security-value-font-size;
			font-weight: bold;
			color: $security-text-color;
			text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);

			.monitor-unit {
				font-size: $security-unit-font-size;
				margin-left: 40px;
				color: #36558e;
			}
		}
	}
}
</style>